<template>
	<view class="content">
		<image class="uni-image" src="/static/logo.png" mode="widthFix" ></image>
		<view class="uni-panel-bottom">
			<view class="uni-panel-item">
				<view class="uni-panel-left">
					<text class="uni-text-editpassword">{{accountName}}同学，欢迎回来！让我们一起开始学习吧！</text>
				</view>
				<view class="uni-panel-box">
					<image class="uni-image-box" src="/static/img/gold.png" mode="widthFix" />
					<text class="uni-text-editpassword">{{goldNum}}</text>
				</view>
				<text class="uni-text-editpassword" @click="clickSetting">设置</text>
			</view>
			<view class="uni-panel-item-bottom">
				<image class="uni-image-arrow-left" src="" mode="widthFix" @click="clickArrowRight"></image>
				<view class="uni-panel-english">
					<view class="uni-word-item" v-for="(item, index) in listBtn" :key="index" @click="clickBtnItem(item)">
						<image class="uni-word-image" :src="item.image" mode="widthFix"></image>
						<text class="uni-text-word" >{{item.text}}</text>
					</view>
				</view>
				<image class="uni-image-arrow" src="" mode="widthFix" @click="clickArrowRight"></image>
			</view>
		</view>
		<view v-if="isShowMask" class="panel-mask">
			<view class="panel-mask-bg" v-if='isShowContact'>
				<view class="panel-mask-title" @click="clickCloseContact">返回</view>
				<view class="panel-mask-contact">{{'&emsp;&emsp;'}}如果您在使用过程中有任何问题，可以通过以下方式联系我们，我们会及时给您解答和帮助，感谢您的理解和支持！</view>
				<view class="btn-mask-agree" >电话：13760367282</view>
				<view class="btn-mask-agree" >邮箱：63171196@qq.com</view>
			</view>
			<view class="panel-mask-bg" v-else>
				<view class="panel-mask-title" @click="clickCloseMask">返回</view>
				<view class="btn-mask-agree" @click="clickYHXY" >用户协议</view>
				<view class="btn-mask-agree" @click="clickYSZC">隐私政策</view>
				<view class="btn-mask-agree" @click="clickReport">学习报告</view>
				<view class="btn-mask-agree" @click="clickEditPassword">修改密码</view>
				<view class="btn-mask-agree" @click="clickContactUs">联系我们</view>
				<view class="btn-mask-unagree" v-if="2==user_type" @click="clickSwitchUser">切换学生</view>
				<view class="btn-mask-unagree" v-else @click="clickDeleteUser">注销账号</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import { deleteUser } from '@/api/api.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				userId: 0,
				accountName: '',
				goldNum: 0,
				user_type: 0,
				animationData: {},
				listBtn: [{image: '/static/img/btn6.png', text: '开始标识'},
							{image: '/static/img/btn6.png', text: '自主复习'},
							{image: '/static/img/btn6.png', text: '每日复习'},
							{image: '/static/img/btn6.png', text: '生词复习'},
							{image: '/static/img/btn6.png', text: '词汇包测试'},
							{image: '/static/img/btn6.png', text: '定期测试'},
							{image: '/static/img/btn6.png', text: '智能生词本'},
							{image: '/static/img/btn6.png', text: '音标与自然拼读'}],
				isShowMask: false,
				isShowContact: false,
			}
		},
		onShow(){
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.accountName = userInfo.nickname;
				this.userId = userInfo.id;
				this.goldNum = userInfo.balance;
				this.user_type = userInfo.user_type;
			}
			let student = uni.getStorageSync('student_info');
			if( student){
				this.accountName = student.nickname;
				this.userId = student.id;
				this.goldNum = student.balance;
			}
			this.bgMusic.play();
		},
		methods: {
			clickBack(){
				//uni.navigateBack();
			},
			clickBtnItem(item){
				this.bgMusic.pause();
				console.log(item.text)
				if('开始标识' == item.text){
					uni.navigateTo({
						url: '/pages/book/index' 
					});
				}else if('自主复习' == item.text){
					uni.navigateTo({
						url: '/pages/studylist/index' 
					});
				}else if('每日复习' == item.text){
					uni.navigateTo({
						url: '/pages/studylist/index?isEveryday=true' 
					});
				}else if('生词复习' == item.text){
					uni.navigateTo({
						url: '/pages/book/index?toPage=newword' 
					});
				}else if('词汇包测试' == item.text){
					uni.navigateTo({
						url: '/pages/book/index?toPage=exam' 
					});
				}else if('定期测试' == item.text){
					uni.navigateTo({
						url: '/pages/examdate/index' 
					});
				}else if('智能生词本' == item.text){
					uni.navigateTo({
						url: '/pages/booknew/index' 
					});
				}else if('音标与自然拼读' == item.text){
					uni.navigateTo({
						url: '/pages/video/index' 
					});
				}
			},
			clickArrowRight(){
			},
			clickEditPassword(){
				uni.navigateTo({
					url: '/pages/resetpwd/index' 
				});
			},
			clickYSZC(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yszc.html')
				})
			},
			clickYHXY(){
				uni.navigateTo({
					url: '/pages/webview/index?url=' + decodeURIComponent('/upload/yhxy.html')
				})
			},
			clickSetting(){
				this.isShowMask = true;
			},
			clickCloseMask(){
				this.isShowMask = false;
			},
			clickCloseContact(){
				this.isShowContact = false;
			},
			clickContactUs(){
				this.isShowContact = true;
			},
			clickSwitchUser(){
				uni.redirectTo({
					url : '/pages/selectstudent/index'
				});
			},
			clickDeleteUser(){
				let self = this;
				uni.showModal({
				    title: '提示',
				    content: '确认要注销账号吗？',
				    success: function (res) {
				        if (res.confirm) {
				            self.innerDeleteUser();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			innerDeleteUser(){
				let params = {id: this.userId};
				deleteUser(params).then(res => {
					//console.log(res)
					if( res.code == 0){
						uni.redirectTo({
							url: '/pages/login/index' 
						});
					}else{
						uni.showToast({
						    title: res.msg,
							icon: 'none',
						    duration: 2000
						});
					}
				}).catch(err => {
					uni.showToast({
					    title: err,
						icon: 'none',
					    duration: 2000
					});
				});
			},
			clickReport(){
				uni.navigateTo({
					url: '/pages/report/index'
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	
	.uni-panel-c {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-top {
		width: 90%;
		height: 20%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.uni-image {
		width: 10%;
	}
	.uni-text-logo{
		color: black;
		font-size: 12vmin;
		margin-left: 2%;
		text-align: center;
		font-weight: bold;
		letter-spacing: 10rpx;
		font-family: "楷体";
	}
	
	.uni-panel-bottom {
		margin-top: 7%;
		width: 90%;
		height: 85%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		z-index: 1;
	}
	.uni-panel-bottom-bk {
		position: absolute;
		left: 5%;
		top: 20%;
		width: 90%;
		height: 80%;
		background-color: white;
		opacity: 0.3;
		border-radius: 40rpx;
	}
	.uni-panel-item {
		width: 96%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-panel-left {
		display: flex;
		flex-direction: column;
	}
	.uni-panel-box{
		width: 10%;
		display: flex;
		flex-direction: row;
	}
	.uni-image-box{
		width: 50%;
	}
	
	.uni-text-item{
		font-size: 5vmin;
		color: white;
		font-weight: bold;
		letter-spacing: 1rpx;
	}
	.uni-text-editpassword{
		color: white;
		font-size: 5vmin;
		text-align: center;
		font-weight: bold;
		display: flex;
		align-items: center;
		text-shadow:
		    -1px -1px 0 #000,
		    1px -1px 0 #000,
		    -1px 1px 0 #000,
		    1px 1px 0 #000; /* 调整偏移量和颜色来设置描边宽度和颜色 */
	}
	
	.uni-panel-item-bottom{
		width: 100%;
		height: 75%;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.uni-image-arrow-left {
		width: 0;
		margin-left: 1%;
		margin-right: 1%;
		transform: rotate(180deg);
	}
	.uni-image-arrow {
		width: 0;
		margin-left: 1%;
		margin-right: 1%;
	}
	.uni-panel-english {
		width: 98%;
		height: 80%;
		display: flex;
		flex-direction: row;
	}
	
	.uni-word-item {
		width: 12%;
		height: 100%;
		margin-right: 1%;
		background-image: linear-gradient(to bottom, #FFFFFF, #43aca7);
	}
	
	.uni-word-image {
		width: 100%;
		height: 40%;
		margin-top: -100%;
	}
	
	.uni-text-word{
		margin-left: 15%;
		font-size: 5vmin;
		color: darkblue;
		font-weight: bold;
		writing-mode: vertical-rl;
		font-family: "MyCustomFont", sans-serif;
	}
	
	.panel-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
	.panel-mask-bg{
		width: 55%;
		height: 90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		color: black;
	}
	.panel-mask-title{
		font-size: 5vmin;
		margin: 4% 0 4% 80%;
	}
	.btn-mask-agree{
		height: 15%;
		color: orange;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 5vmin;
	}
	.btn-mask-unagree{
		height: 15%;
		color: lightgray;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vmin;
	}
	.panel-mask-contact{
		width: 90%;
		margin-left: 5%;
		margin-bottom: 5%;
		font-size: 5vmin;
	}
	
</style>
